<template>
  <div id="app">
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input
          class="new-todo"
          autofocus=""
          autocomplete="off"
          placeholder="What needs to be done?"
          v-model="newTodoRef"
          @keyup.enter="addTodo"
        />
      </header>
      <section class="main" v-show="todosRef.length > 0">
        <input
          id="toggle-all"
          class="toggle-all"
          type="checkbox"
          :checked="allDoneRef"
          @input="setAllChecked($event.target.checked)"
        />
        <!-- 这里不应该是change事件吗 -->
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <li
            class="todo"
            :class="{
              completed: todo.completed,
              editing: todo === editingTodoRef,
            }"
            v-for="todo in filteredTodosRef"
            :key="todo.id"
          >
            <div class="view">
              <input class="toggle" type="checkbox" v-model="todo.completed" />
              <!-- 可以直接这样使用左键双击事件，想想这个是哪里的功能，注意名字是dblclick -->
              <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
              <button @click="remove(todo)" class="destroy"></button>
            </div>
            <input
              v-model="todo.title"
              @blur="doneEdit(todo)"
              @keyup.enter="doneEdit(todo)"
              @keyup.escape="cancelEdit(todo)"
              class="edit"
              type="text"
            />
          </li>
        </ul>
      </section>
      <footer class="footer" v-show="todosRef.length > 0">
        <span class="todo-count">
          <strong>{{ remainingRef }}</strong>
          <span>item{{ remainingRef === 1 ? '' : 's' }} left</span>
        </span>
        <ul class="filters">
          <li>
            <a href="#/all" :class="{ selected: visibilityRef === 'all' }">
              All
            </a>
          </li>
          <li>
            <a
              href="#/active"
              :class="{ selected: visibilityRef === 'active' }"
            >
              Active
            </a>
          </li>
          <li>
            <a
              href="#/completed"
              :class="{ selected: visibilityRef === 'completed' }"
            >
              Completed
            </a>
          </li>
        </ul>
        <button
          @click="removeCompleted"
          class="clear-completed"
          v-show="completedRef > 0"
        >
          Clear completed
        </button>
      </footer>
    </section>
  </div>
</template>

<script>
import useTodoList from './composition/useTodoList';
import useNewTodo from './composition/useNewTodo';
import useFilter from './composition/useFilter';
import useEditTodo from './composition/useEditTodo';
import useRemoveTodo from './composition/useRemoveTodo';
export default {
  setup() { // 除了props以及components等配置，其他都可以使用setup函数完成
    const { todosRef } = useTodoList();

    return {
      todosRef, // 有了composition api，功能才是最小单位，组件不是，而且功能可以复用
      ...useNewTodo(todosRef), // 如果使用mixins，他的混合是没有层次感的，给人感觉很乱，一个混合用其他混合的东西的时候
      ...useFilter(todosRef),
      ...useEditTodo(todosRef),
      ...useRemoveTodo(todosRef),
    };
  },
};
</script>

